<template>
    <div>
        <jgsearch
            :searchData="searchData"
            @on-input="searchaskData"
            @on-change-change="changeaskData"
            @on-change-Radio="changeRadio"
            @on-change-Checkbox="changeCheckbox"
            @on-change-Date="changeDate"
        >
        </jgsearch>
        <jgtable
            :data="list"
            :params="params"
            :columns="columns"
            :loading="loading"
            :total="total"
            @askData="askData"></jgtable>
    </div>
</template>

<script>
import jgsearch from '../components/search'
import jgtable from '../components/table'
import mixin from "../components/mixin";
import {
    clueusergrablist,
    clueuserinfo,
    clueusercontact,
    patientindexsearchcity,
    grapRepeatData,
    EweCharts,
    patientindexsearchmobile,
    clueuserexportgrab
} from "@api/hqapi";
import dayjs from "dayjs";
import { mapState, mapMutations } from "vuex";
export default {
    name: 'grap', // 留言
    mixins: [mixin],
    components: { jgsearch, jgtable },
    props: {
        booltimeButton: { type: Boolean, default: true },
        clue_status_id: { type: [String, Number], default: '' },
        ceshiButton: { type: Boolean, default: false },
        columnsHeader: { type: [String, Number], default: 0 },
        customer: { type: Boolean, default: false },
    },

    data() {
        const options = { disabledDate(date) { return date && date.valueOf() > Date.now() }}
        return {
            searchData: {
                left: [
                    { id: 0, style: {width: '250px'}, key: "Input", clearable: true, placeholder: "请输入姓名/手机号/微信号/唯一身份", value: "" },
                    { id: 15, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "部门筛选", value: "", childList: [], callback: "change" },
                    { id: 16, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "联系人员", value: "", childList: [], callback: "change" },
                    { id: 17, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "对话方式", value: "", childList: [], callback: "change" },
                    { id: 0, key: "DatePicker", type: "daterange", options: options, placeholder: "请选择来电日期", value: [new Date(),new Date()], callback: "Date" },
                    { id: 0, key: "RadioGroup", show: { show: true }, type:'button', value: 10, childList: [{ label: '近10天', value: 10 },{ label: '近30天', value: 30 },{ label: '近90天', value: 90 }], callback: "Radio"},
                    { id: 0, key: "CheckboxGroup", value: [], childList: [{ label: '重复', value: 1 },{ label: '手机号', value: 2 },{ label: '测试', value: 3, show: true }], callback: "Checkbox" }
                ],
            },
            params: {
                page: 1,
                pageSize: 10,
                keyword: "",
                clue_status_id: "",
                dialog_mode_id: "",
                contact_id: "",
                source_channel_id: "",
                start_date: new Date(),
                end_date: new Date(),
                contact_way: 0,
                have_repeat: 0,
                unique_id: "",
            },
            columns: [
                { title: "基本信息", slot: "grapinfo", fixed: "left", width: 150 },
                { title: "地区", key: "region", width: 130 },
                { title: "获取时间", key: "created_at", width: 160 },
                { title: "联系方式", slot: "grapmobile", width: 200 },
                { title: "唯一身份", key: "visitor_uid", width: 250, ellipsis: true, tooltip: true },
                { title: "对话方式", slot: "grapdialog_mode", width: 140 },
                { title: "来源页面", key: "source_page", width: 130, ellipsis: true, tooltip: true },
                { title: "留言内容", key: "message", width: 300, ellipsis: true, tooltip: true },
                { title: "咨询备注", key: "advisory_remark", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "联系人员", key: "contact_name", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "来源备注", key: "source_remark", width: 130, ellipsis: true, tooltip: true },
                { title: "操作", slot: "grapoperation", fixed: "right", width: 130 },
            ],
        };
    },

    mounted() {
        clueuserinfo({ id:0, type: 1 }).then(res => {
            this.searchData.left.forEach(item => {
                if (item.id === 15) {
                    item.childList = res.department;
                } else if (item.id === 16) {
                    item.childList = res.contact_member
                } else if (item.id === 17) {
                    item.childList = res.dialog
                }
            });
        })
    },

    methods: {
        // 初始化
        initial() {
            this.initials()
        },
        askData() {
            this.loading = true
            this.getparams()
            clueusergrablist(this.params).then((res) => {
                this.list = Object.freeze(res.list);
                this.total = res.total;
                let params = { key: 'grap', total: res.total }
                this.$emit('returntotal', params);
                this.loading = false
            });
        },
    },
};
</script>

<style lang="scss" scoped>

</style>